<template>
	<view>
		<view>
			<view class="fixed w-100" :style="{zIndex: 999}">
				<view :style="{height: StatusBar+'px'}" class="cu-bar bg-white search">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input type="text" v-model="searchObj.kcname" placeholder="输入搜索的关键词" confirm-type="search"></input>
					</view>
					<view class="action">
						<button class="cu-btn bg-main  round" @tap="search">搜索</button>
					</view>
				</view>
				<view class="bg-white" :style="{height: StatusBar+'px'}">
					<search-bar @change="search"></search-bar>
				</view>
			</view>
			<view class="" :style="{paddingTop: StatusBar*2+'px'}">
				<view class="margin-top-xs margin-bottom-xs padding-xs" v-for="(item,index) in kcitems" :key="index">
					<view @tap="toKcDetail(item.kcid)" class="bg-white shadow radius flex justify-between overflow-hidden relative">
						<view class="w-20 relative">
							<view class="bg-10"></view>
							<view class="absolute left0 top0 w-100 h-100">
								<image class="w-100 h-100" mode="aspectFill" :src="item.kcover"></image>
								<text class="bg-red text-white padding-xxs round-right absolute top0 left0 text-xs">{{kczt[item.zt]}}</text>
							</view>
							<view @tap="toJiaolian(item.jlid)" style="background-color: rgba(0, 0, 0, 0.6);" 
								class="flex flex-direction w-100 align-start absolute left0 bottom0 padding-xxs">
								<view class="flex justify-start align-center">
									<image style="width: 40rpx; height: 40rpx;" class="round" mode="aspectFill" :src="item.jcover"></image>
									<text class="text-pink">{{item.jlname}}</text>
								</view>
								<uni-rate size="12" v-model="item.count"></uni-rate>
							</view>
						</view>
						
						<view class="w-80 padding-xs flex flex-direction justify-around">
							<view class="flex justify-between align-center">
								<text class="text-df text-black">{{item.itemname}}</text>
								<text class="cuIcon-time">
									<text class="text-sm text-gray padding-left-xs">{{item.dt}}</text>
									<text class="text-sm text-gray padding-left-xs">{{item.st}}~{{item.et}}</text>
								</text>
							</view>
							<view class="  flex justify-between align-center">
								<text class="text-df text-orange flex justify-start align-center">
									<text class="iconfont icon-kecheng "></text>
									<text class="text-sm text-bold">{{item.kcname}}</text>
								</text>
								
								<text class="text-main text-sm">
									<text v-if="kc.zdrs == 1" class="">私教课</text>
									<text v-else-if="kc.zdrs <= 6" class="">小班课</text>
									<text v-else class="">大班课</text>
								</text>
							</view>
							<view class="flex justify-between align-center text-sm">
								<text class="iconfont icon-tiyuguan text-blue padding-left-xs padding-right-xs">{{item.sname}}</text>
								<text class="iconfont icon-fangjian text-blue padding-left-xs padding-right-xs">{{item.rname}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="kcitems.length < searchObj.total" class="padding ">
				<button @tap="loadMore" class="cu-btn block bg-main lg">显示更多</button>
			</view>
		</view>
	</view>
</template>

<script>
	import searchBar from './searchBar.vue';
	export default {
		components: {
			"search-bar": searchBar
		},
		data: function() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				key: "",
				kcitems: [],
				kczt: {},
				searchObj: {
					current: 1,
					size: 16,
					total: 0,
					kcname: "",
					jlid: "",
					storeid: "",
					roomid: "",
					kclxid: "",
					zt: "",
					bx: "",
					dt: null,
					st: null,
					et: null
				}
			}
		},
		onShareAppMessage: function(){
			return {
				title: this.store.state.title,
				path: '/pages/first?id='+this.store.state.client.clientid
			}
		},
		created: function(option) {
			this.constant.get("kczt").then(data => {
				this.kczt = data.kczt;
			});
			this.search();
		},
		methods: {
			toJiaolian: function(jlid) {
				uni.navigateTo({
					url: "/pages/cxy/jl/jlxx?jlid="+jlid
				})
			},
			toKcDetail: function(kcid) {
				uni.navigateTo({
					url: "/pages/cxy/kc/detail?kcid="+kcid
				})
			},
			search: function(param) {
				this.kcitems = [];
				this.searchObj.current = 1;
				this.loadKc(param);
			},
			loadMore: function() {
				this.searchObj.current++;
				this.loadKc();
			},
			loadKc: function(param) {
				if (param) {
					this.searchObj.storeid = param.storeid ? param.storeid : "";
					this.searchObj.roomid = param.roomid ? param.roomid : "";
					this.searchObj.jlid = param.jlid ? param.jlid : "";
					this.searchObj.kclxid = param.kclxid ? param.kclxid : "";
					this.searchObj.zt = param.zt ? param.zt : "";
					this.searchObj.bx = param.bx ? param.bx : "";
					this.searchObj.dt = param.cd ? param.cd : "";
					this.searchObj.st = param.st ? param.st : "";
					this.searchObj.et = param.et ? param.et : "";
				}
				this.api("/kc/item/page").send(this.searchObj).then(data => {
					
					for (let index in data.kcitems.records) {
						let record = data.kcitems.records[index];
						this.kcitems.push(record);
					}
					this.searchObj.total = data.kcitems.total;
				});
			}
		}
	}
</script>

<style>
</style>